<!-- 
 * 自定义消息组件
 * @author: 
 * @since: 2022-05-23
 * index.vue
-->
<template>
  <div class="custom-info-container">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="comEvent" @colSelect="colSelect" @refresh="getCustomInfoList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="161" :handleFun="handleFun" :isShowByStatus="true" @statusHandleEvent="statusHandleEvent">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { getCustomInfoListApi, getPushGroupListApi, customInfoPushApi, customInfoBatchApi } from '@/api/interface/info.js'
import { successHandle, colFilters } from '@/utils/common.js'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { sessionstorage } from '@/utils/storage.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
const store = useStore();


const state = reactive({
  formModel: {//消息中心搜索列表的参数
    titleKeyword: '',//消息标题
    contentKeyword: '',//消息内容
    roleId: '',//推送群体
    pushStateType: '',//推送状态
    time: '',//时间
    start: '',//开始时间
    end: '',//结束时间
  },
  formLabel: [
    {
      label: '消息标题',
      model: "titleKeyword",
      type: "text",
      width: '160',
      placeholder: '请输入关键词',
    },
    {
      label: '消息内容',
      model: "contentKeyword",
      type: "text",
      width: '160',
      placeholder: '请输入关键词',
    },
    {
      label: '推送群体',
      model: "roleId",
      type: "select",
      width: '160',
      placeholder: '',
      option: [],
    },
    {
      label: '推送状态',
      model: "pushStateType",
      type: "select",
      width: '160',
      placeholder: '',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '已推送',
          value: 'SUCCESS'
        },
        {
          key: '未推送',
          value: 'MANUAL'
        },
      ],
    },
    {
      label: '推送时间',
      model: 'time',
      type: 'datetimerange',
      width: '360',
      option: [],
    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '消息标题',
      prop: "customMessageTitle",
    },
    {
      label: '消息内容',
      prop: "customMessageContent",
    },
    {
      label: '推送时间',
      prop: "pushDate",
    },
    {
      label: '推送状态',
      prop: "customMessagePushState",
    },
    {
      label: '推送方式',
      prop: "customMessagePushType",
    },
    {
      label: '推送群体',
      prop: "customMessagePushRoleName",
    },
  ],
  btnData: [
    {
      name: '查看',
      icon: 'chakan1',
      color: '#00A2FF',
      change: 'look'
    },
    {
      name: '编辑',
      icon: 'bianji',
      color: '#25D390',
      change: 'edit'
    },
    {
      name: '删除',
      icon: 'shanchu',
      color: '#F74B33',
      change: 'del'
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  selectTableId: [],//选择表格数据
  pushType: [
    {
      label: 'PROMPTLY',
      value: '立即推送'
    },
    {
      label: 'MANUAL',
      value: '手动推送'
    },
    {
      label: 'TIMING',
      value: '定时推送'
    },
  ],//推送方式
  pushTypeKey: ''

})
//消息中心模块功能按钮
const btnList = reactive([
  {
    name: '新增消息',
    icon: '',
    bgColor: '#25D390'
  },
  {
    name: '批量删除',
    icon: 'shanchu',
    bgColor: '#F74B33'
  },


])

//区域加载
const loading = ref(false)

onMounted(() => {
  getPushGroupList()
  getCustomInfoList()

})

//获取推送群体列表
const getPushGroupList = () => {
  getPushGroupListApi().then(res => {
    const { status, data } = res
    if (status == 200) {
      state.formLabel[2].option = data.map((item) => ({
        key: item.rolename,
        value: item.id
      }))

    }
  })

}
//获取自定义消息列表
const getCustomInfoList = () => {
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    contentKeyword: state.formModel.contentKeyword,
    titleKeyword: state.formModel.titleKeyword,
    start: state.formModel.start,
    end: state.formModel.end,
    pushStateType: state.formModel.pushStateType,
    roleId: state.formModel.roleId
  }
  getCustomInfoListApi(params).then(res => {
    const { data, status } = res
    if (status === 200) {
      state.tableData = data.result.map((item) => ({
        ...item,
        status: item.pushType
      }))
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
    }


  })
}

//点击消息中心操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://新增消息
      router.push({ name: 'AddInfo' }).catch(() => { });
      break;
    case 1://批量删除
      customInfoBatchHandle('DEL')
      break;

  }
}

//自定义消息批量操作
const customInfoBatchHandle = (type) => {
  if (state.selectTableId.length < 1) {
    ElMessage({
      message: '至少选择一条数据',
      type: 'warning',
    })
  } else {
    const params = {
      batchType: type,
      ids: state.selectTableId
    }
    ElMessageBox.confirm('是否删除此数据?', '操作提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      customInfoBatchApi(params).then(res => {
        successHandle(res)
        getCustomInfoList()
      })
    })

  }
}

//过滤器
const handleFun = (id) => {
  let obj = {
    text: "",
    icon: "",
    color: '',
  }
  switch (id) {
    case 'MANUAL'://手动推送
      obj.text = "推送";
      obj.icon = 'fasong';
      obj.color = '#00A2FF';
      break;
  }
  return obj;
}

//搜索
const filter = () => {
  const [start, end] = state.formModel.time
  state.formModel.start = start
  state.formModel.end = end
  getCustomInfoList()
}

//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getCustomInfoList()
}

//表格中的操作
const comEvent = (type, data) => {
  switch (type) {
    case 'look':
      sessionstorage.set('infoItem', data)
      router.push({ name: 'LookInfo' }).catch(() => { });
      break;
    case 'edit':
      sessionstorage.set('infoItem', data)
      router.push({ name: 'EditInfo' }).catch(() => { });
      break;
    case 'del':
      let arr = [];
      arr.push(data.id)
      state.selectTableId = arr;
      customInfoBatchHandle('DEL')
      break;

  }
}

//根据状态表格中的操作
const statusHandleEvent = (data) => {
  state.pushType.forEach(item => {
    if (item.value === data.customMessagePushType) {
      console.log(item.value, '----item.value---');
      console.log(item.label, '---item.label--');
      state.pushTypeKey = item.label
    }
  })
  const params = {
    id: data.id,
    customMessageContent: data.customMessageContent,
    customMessagePushRoleId: data.customMessagePushRoleId,
    customMessagePushRoleName: data.customMessagePushRoleName,
    customMessagePushTimeingDate: data.customMessagePushTimeingDate,
    customMessageTitle: data.customMessageTitle,
    pushType: state.pushTypeKey
  }
  customInfoPushApi(params).then(res => {
    successHandle(res)
    getCustomInfoList()
  })

}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getCustomInfoList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getCustomInfoList()
}

//选择表格数据
const getSelectChange = (row) => {
  state.selectTableId = row.map(item => item.id)
}

</script>

<style lang="scss" scoped></style>
